<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="../../dist/css/framework7.ios.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="css/my-app.css">
  </head>
  <body>
    <!-- Status bar overlay for fullscreen mode-->
    <div class="statusbar-overlay"></div>
    <!-- Panels overlay-->
    <div class="panel-overlay"></div>
    <!-- Left panel with reveal effect-->
    <div class="panel panel-left panel-reveal">
      <div class="content-block">
        <p>Left panel content goes here</p>
      </div>
    </div>
    <!-- Right panel with cover effect-->
    <div class="panel panel-right panel-cover">
      <div class="content-block">
        <p>Right panel content goes here</p>
      </div>
    </div>
    <!-- Views-->
    <div class="views">
      <!-- Left view-->
      <div class="view view-left navbar-through">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="center sliding">Left View</div>
          </div>
        </div>
        <div class="pages">
          <div data-page="index-left" class="page">
            <div class="page-content">
              <div class="content-block-title">Left View Links</div>
              <div class="list-block">
                <ul>
                  <li><a href="left-page-1.html" class="item-link">
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title">Left Page 1</div>
                        </div>
                      </div></a></li>
                  <li><a href="left-page-2.html" class="item-link">
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title">Left Page 2</div>
                        </div>
                      </div></a></li>
                </ul>
              </div>
              <div class="content-block-title">Control Main View</div>
              <div class="list-block">
                <ul>
                  <li><a href="about.html" data-view=".view-main" class="item-link">
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title">About</div>
                        </div>
                      </div></a></li>
                  <li><a href="services.html" data-view=".view-main" class="item-link">
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title">Services</div>
                        </div>
                      </div></a></li>
                  <li><a href="#" data-view=".view-main" class="back item-link">
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title">Back in history</div>
                        </div>
                      </div></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Right view, it is main view-->
      <div class="view view-main navbar-through">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="center sliding">Main View</div>
          </div>
        </div>
        <!-- Pages-->
        <div class="pages">
          <!-- Page, data-page contains page name-->
          <div data-page="index-1" class="page">
            <!-- Scrollable page content-->
            <div class="page-content">
              <div class="content-block-title">Hello</div>
              <div class="content-block">
                <div class="content-block-inner">
                  <p>This is an example of split view application layout, commonly used on iPad apps. The main approach of such kind of layout is that you can see different views at the same time.</p>
                  <p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.</p>
                  <p>The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.</p>
                  <p>And of course, your favorite panels are still here: <a href="#" class="open-panel">left</a> and  <a href="#" data-panel="right" class="open-panel">right</a></p>
                </div>
              </div>
              <div class="list-block">
                <ul>
                  <li><a href="about.html" class="item-link">
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title">About</div>
                        </div>
                      </div></a></li>
                  <li><a href="services.html" class="item-link">
                      <div class="item-content">
                        <div class="item-inner">
                          <div class="item-title">Services</div>
                        </div>
                      </div></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="../../dist/js/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="js/my-app.js"></script>
  </body>
</html>